﻿$(document).ready(function() {
    gallery.init();
});

var gallery = {
    showplace: false,
    stage: false,
    dancer: false,
    last: false,
    next: false,
    imgs: false,
    loading: false,
    front: false,
    back: false,
    runer: false,
    index: 0,
    pageCount: 0,
    pageSize: 7,
    pageIndex: 1,
    imgSize: 60,
    init: function() {
        this.showplace = $('#showplace');
        this.stage = $('#stage');
        this.dancer = $('#dancer');
        this.last = $('#last');
        this.next = $('#next');
        this.imgs = $('#runer img');
        this.loading = $('#loading');
        this.front = $('#front');
        this.back = $('#back');
        this.runer = $('#runer');
        this.initStage();
        this.initNav();
        this.imgs.eq(0).addClass('curr');
        this.imgs.each(function(i, o) { $(this).attr('index', i) });
        this.imgs.click(this.show);
    },
    initStage: function() {
        var _this = this;
        _this.initSize();
        _this.stage.mousemove(function(event) {
            if (event.clientX > $('body').width() / 2) {
                _this.next.show();
                _this.last.hide();
            }
            else {
                _this.last.show().mouseover(function() { $(this).show() });
                _this.next.hide();
            }
        }).mouseout(function() {
            _this.last.hide();
            _this.next.hide();
        });
    },
    initNav: function() {
        var _this = this;
        _this.runer.width(_this.imgs.length * _this.imgSize);
        _this.pageCount = Math.ceil(_this.imgs.length / _this.pageSize);
        _this.front.click(function() {
            if (_this.pageIndex > 1) {
                _this.runer.animate({ marginLeft: -_this.imgSize * _this.pageSize * (_this.pageIndex - 2) }, 'slow');
                _this.pageIndex--;
            }
        });
        _this.back.click(function() {
            if (_this.pageIndex < _this.pageCount) {
                _this.runer.animate({ marginLeft: -_this.imgSize * _this.pageSize * _this.pageIndex }, 'slow');
                _this.pageIndex++;
            }
        });
        _this.last.click(function() {
            var posi = _this.index - 1;
            if (posi < 0) {
                return;
            }
            _this.index = posi;
            _this.imgs.eq(posi).click();
            if (posi > 0 && (posi + 1) % _this.pageSize == 0) {
                _this.front.click();
            }
        });
        _this.next.click(function() {
            var posi = _this.index + 1;
            if (posi >= _this.imgs.length) {
                return;
            }
            _this.index = posi;
            _this.imgs.eq(posi).click();
            if (posi > 0 && posi % _this.pageSize == 0) {
                _this.back.click();
            }
        });
    },
    initSize: function() {
        var sh = this.stage.height();
        var innerTop = sh / 2 - 14;
        this.last.css({ top: innerTop });
        this.next.css({ top: innerTop });
        this.resize();
    },
    resize: function() {
        var _this = this;
        var timer = setInterval(function() {
            if (document.getElementById('dancer').complete) {
                clearInterval(timer);
                var dw = _this.dancer.width();
                var dh = _this.dancer.height();

                var sw = _this.showplace.width();
                var sh = _this.showplace.height();
                
                dw = dw > sw ? sw - 16 : dw;
                dh = dh > sh ? sh - 16 : dh;
                
                var innerTop = dh / 2 - 14;
                var outerTop = sh / 2 - innerTop - 22;

                _this.last.animate({ top: innerTop });
                _this.next.animate({ top: innerTop });
                _this.loading.animate({ left: dw / 2 - _this.loading.width() / 2, top: innerTop });
                _this.stage.animate({ width: dw, height: dh, top: outerTop }, function() {
                    _this.loading.hide();
                    gallery.dancer.fadeIn()
                });

            }
        }, 100);
    },
    show: function() {
        var url = $(this).attr('src');
        gallery.loading.show();
        gallery.dancer.hide();
        gallery.dancer.attr('src', url);
        gallery.resize();
        gallery.imgs.removeClass('curr');
        gallery.index = Number($(this).attr('index'));
        $(this).addClass('curr');
    }
};   